<template>
	<div class="h-full bg-white">
		<a-card :bordered="false">
			<a-tabs v-model:activeKey="activeKey" @change="onTabChange">
				<a-tab-pane :key="0" tab="历史合同"></a-tab-pane>
				<a-tab-pane :key="1" tab="新合同"></a-tab-pane>
			</a-tabs>

			<a-card :bordered="false" :loading="onloading" :bodyStyle="{ padding: '0 0 20px' }">
				<div v-for="(item, index) in contractInfoList" :key="item.id">
					<h2 v-if="contractInfoList.length > 1" style="padding-top: 10px">合同{{ index + 1 }}：</h2>
					<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] mt-3 pl-2">
						基本信息
					</div>
					<div class="flex flex-wrap gap-4 my-6">
						<div class="w-[calc((100%-50px)/4)] truncate">
							<span class="text-gray-500">合同编号</span><span class="ml-3">{{ item.code || '-' }}</span>
						</div>
						<div class="w-[calc((100%-50px)/4)] truncate">
							<span class="text-gray-500">合同模板</span><span class="ml-3">{{ item.templateName || '-' }}</span>
						</div>
						<div class="w-[calc((100%-50px)/4)] truncate">
							<span class="text-gray-500">合同状态</span
							><span class="ml-3">{{ $TOOL.dictTypeData('APPROVAL_STATUS', item.contractStatus) }}</span>
						</div>
						<div class="w-[calc((100%-50px)/4)] truncate">
							<span class="text-gray-500">签约方式</span><span class="ml-3">{{ signMethodEnum[item.signMethod] }}</span>
						</div>
						<div class="w-[calc((100%-50px)/4)] truncate">
							<span class="text-gray-500">签约场景</span
							><span class="ml-3">{{ $TOOL.dictTypeData('SignPayment', item.signPayment) }}</span>
						</div>
						<div class="w-[calc((100%-50px)/4)] truncate">
							<span class="text-gray-500">合同创建人</span><span class="ml-3">{{ item.createUserName || '-' }}</span>
						</div>
						<div class="w-[calc((100%-50px)/4)] truncate">
							<span class="text-gray-500">创建时间</span><span class="ml-3">{{ item.createAt || '-' }}</span>
						</div>
						<div class="w-[calc((100%-40px)/4)] truncate">
							<span class="text-gray-500">签约日期</span
							><span class="ml-3" style="white-space: normal">{{ item.signingDate || '-' }}</span>
						</div>
						<div class="w-[calc((100%-20px)/1.4)] truncate">
							<span class="text-gray-500">合同备注</span
							><span class="ml-3" style="white-space: normal">{{ item.remark || '-' }}</span>
						</div>
						<div class="w-[calc((100%-20px)/2)] truncate" style="display: flex; align-items: flex-start">
							<span class="text-gray-500">付款凭证</span
							><span class="ml-3">
								<media-section :url-str="item.voucherImg" />
							</span>
						</div>
						<div class="w-[calc((100%-20px)/2)] truncate" style="display: flex; align-items: flex-start">
							<span class="text-gray-500">合同照片</span
							><span class="ml-3">
								<media-section :url-str="item.contractImg" />
							</span>
						</div>
					</div>

					<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] mt-6 pl-2">
						签约方信息
					</div>
					<div class="flex text-left pt-4">
						<div class="flex-1">
							<div class="text-gray-500">甲方抬头</div>
							<div>{{ item.firstParty || '-' }}</div>
						</div>
						<div class="flex-1">
							<div class="text-gray-500">甲方联系人/法人</div>
							<div>{{ item.firstPartyPerson || '-' }}</div>
						</div>
						<div class="flex-1">
							<div class="text-gray-500">甲方联系电话</div>
							<div>{{ item.firstPartyMobile || '-' }}</div>
						</div>
						<div class="flex-1">
							<div class="text-gray-500">甲方地址</div>
							<div>{{ item.firstPartyAddress || '-' }}</div>
						</div>
					</div>
					<div class="flex text-left pt-4 pb-6">
						<div class="flex-1">
							<div class="text-gray-500">乙方抬头</div>
							<div>{{ item.secondPartyName || '-' }}</div>
						</div>
						<div class="flex-1">
							<div class="text-gray-500">乙方联系人</div>
							<div>{{ item.secondPartyPerson || '-' }}</div>
						</div>
						<div class="flex-1">
							<div class="text-gray-500">乙方联系电话</div>
							<div>{{ item.secondPartyMobile || '-' }}</div>
						</div>
						<div class="flex-1">
							<div class="text-gray-500">乙方送达地址</div>
							<div>{{ item.secondPartyAddress || '-' }}</div>
						</div>
					</div>

					<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] pl-2">订单信息</div>
					<a-table
						:columns="!activeKey ? transColumns : columns"
						:data-source="item.list"
						:scroll="{ x: 1500 }"
						:pagination="false"
						size="small"
						class="mt-[20px]"
					>
						<template #bodyCell="{ column, record }">
							<template v-if="column.dataIndex === 'businessType'">
								{{ $TOOL.dictTypeData('BUSINESS_TYPE', record.businessType) }}
							</template>
							<template v-if="column.dataIndex === 'depositAmount'">
								{{ record.paymentMethod === 'FULL' ? '-' : record.depositAmount ?? '-' }}
							</template>
							<template v-if="column.dataIndex === 'balancePayment'">
								{{ record.paymentMethod === 'FULL' ? '-' : record.balancePayment ?? '-' }}
							</template>
						</template>
					</a-table>
					<div class="flex text-left py-5">
						<div class="flex-1">
							<div class="text-gray-500">付款类型</div>
							<div>{{ $TOOL.dictTypeData('PAYMENT_METHOD', item.paymentMethod) }}</div>
						</div>
						<div class="flex-1">
							<div class="text-gray-500">合同总金额</div>
							<div>{{ item.contractAmount ?? '-' }}</div>
						</div>
						<div class="flex-1">
							<div class="text-gray-500">定金总金额</div>
							<div>{{ item.paymentMethod === 'FULL' ? '-' : item.depositAmount ?? '-' }}</div>
						</div>
						<div class="flex-1">
							<div class="text-gray-500">尾款总金额</div>
							<div>{{ item.paymentMethod === 'FULL' ? '-' : item.balancePayment ?? '-' }}</div>
						</div>
						<div class="flex-1">
							<div class="text-gray-500">尾款结清日期</div>
							<div>{{ item.paymentMethod === 'FULL' ? '-' : item.balancePaymentTime ?? '-' }}</div>
						</div>
					</div>

					<div v-if="activeKey" class="flex text-left py-5">
						<div class="flex-1">
							<div class="text-gray-500">历史合同抵扣金额</div>
							<div>{{ item.transDeductionAmount ?? '-' }}</div>
						</div>
						<div class="flex-1">
							<div class="text-gray-500">实际支付金额</div>
							<div>{{ item.orderAmount ?? '-' }}</div>
						</div>
						<div class="flex-1">
							<div class="text-gray-500">合同剩余金额</div>
							<div>{{ item.reduceContractAmount ?? '-' }}</div>
						</div>
					</div>

					<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] pl-2">其他信息</div>
					<div class="flex text-left py-5">
						<div class="flex-1">
							<div class="text-gray-500">签约方式</div>
							<div>{{ signMethodEnum[item.signMethod] || '-' }}</div>
						</div>
						<div class="flex-1">
							<div class="text-gray-500">签约场景</div>
							<div>{{ signPayEnum[item.signPayment] || '-' }}</div>
						</div>
						<div class="flex-1">
							<div class="text-gray-500">合同创建人</div>
							<div>{{ item.createUserName || '-' }}</div>
						</div>
						<div class="flex-1">
							<div class="text-gray-500">创建时间</div>
							<div>{{ item.createAt || '-' }}</div>
						</div>
						<div class="flex-1">
							<div class="text-gray-500">签约日期</div>
							<div>{{ item.signingDate || '-' }}</div>
						</div>
						<div class="flex-1">
							<div class="text-gray-500">合同备注</div>
							<div>{{ item.remark || '无' }}</div>
						</div>
					</div>
					<div class="flex text-left pb-5">
						<div class="flex-1">
							<div class="text-gray-500">合同照片</div>
							<div
								v-if="item.contractImg"
								class="text-blue-500 cursor-pointer"
								@click="onPreview({ title: '查看合同照片', imgUrl: item.contractImg })"
							>
								查看
							</div>
							<div v-else>-</div>
						</div>
						<div class="flex-1">
							<div class="text-gray-500">付款凭证</div>
							<div
								v-if="item.voucherImg"
								class="text-blue-500 cursor-pointer"
								@click="onPreview({ title: '查看付款凭证', imgUrl: item.voucherImg })"
							>
								查看
							</div>
							<div v-else>-</div>
						</div>
						<div class="flex-1"></div>
						<div class="flex-1"></div>
						<div class="flex-1"></div>
						<div class="flex-1"></div>
					</div>

					<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] pl-2">审批信息</div>
					<div class="flex text-left py-6">
						<div class="flex-1">
							<div class="text-gray-500">业务审批状态</div>
							<div>{{ approvalStatusEnum[item.approvalStatus] || '-' }}</div>
						</div>
						<div class="flex-1">
							<div class="text-gray-500">业务审批时间</div>
							<div>{{ item.approvalTime || '-' }}</div>
						</div>
						<div class="flex-1">
							<div class="text-gray-500">业务审批备注</div>
							<div>{{ item.approvalRemark || '-' }}</div>
						</div>
						<div class="flex-1">
							<div class="text-gray-500">财务审批状态</div>
							<div>{{ approvalStatusEnum[item.financeApprovalStatus] || '-' }}</div>
						</div>
						<div class="flex-1">
							<div class="text-gray-500">财务审批时间</div>
							<div>{{ item.financeApprovalTime || '-' }}</div>
						</div>
						<div class="flex-1">
							<div class="text-gray-500">财务审批备注</div>
							<div>{{ item.financeRemark || '-' }}</div>
						</div>
					</div>
					<div class="flex text-left pb-6">
						<div class="flex-1">
							<div class="text-gray-500">驳回原因</div>
							<div>{{ item.rejectReason || item.approvalRejectReason || '-' }}</div>
						</div>
					</div>

					<template v-if="item.payList && item.payList.length > 0">
						<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] pl-2">
							财务收款信息
						</div>
						<div v-for="(itemChild, indexChild) in item.payList" :key="indexChild" class="flex text-left py-6">
							<div class="flex-1">
								<div class="text-gray-500">收款方式</div>
								<div>{{ itemChild.companyAccountName || '-' }}</div>
							</div>
							<div class="flex-1">
								<div class="text-gray-500">收款时间</div>
								<div>{{ itemChild.payTime.substr(0, 10) || '-' }}</div>
							</div>
							<div class="flex-1">
								<div class="text-gray-500">到账金额</div>
								<div>{{ itemChild.receivedAmount + '' || '-' }}</div>
							</div>
							<div class="flex-1">
								<div class="text-gray-500">手续费</div>
								<div>{{ itemChild.commission + '' || '-' }}</div>
							</div>
							<div class="flex-1"></div>
						</div>
					</template>

					<template v-if="!activeKey">
						<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] pl-2">
							合同转换信息
						</div>
						<div v-for="(itemVal, indexVal) in item.transHistoryList" :key="indexVal" class="flex text-left pt-3">
							<div class="flex-1">
								<div class="text-gray-500">合同转换时间</div>
								<div>{{ itemVal.transTime || '-' }}</div>
							</div>
							<div class="flex-1">
								<div class="text-gray-500">合同转换人</div>
								<div>{{ itemVal.transUserName || '-' }}</div>
							</div>
							<div class="flex-1">
								<div class="text-gray-500">转化类型</div>
								<div>{{ transTypeEnum[itemVal.isTotal] || '-' }}</div>
							</div>
							<div class="flex-1">
								<div class="text-gray-500">合同可转化金额</div>
								<div>{{ itemVal.transContractAmount || '-' }}</div>
							</div>
							<div class="flex-1"></div>
						</div>
					</template>

					<div v-if="index < contractInfoList.length - 1" class="h-[20px] bg-gray-200"></div>
				</div>
			</a-card>
		</a-card>
	</div>

	<!-- 查看付款凭证 -->
	<image-preview ref="imagePreviewRef" />
</template>
<script setup>
	import contractApi from '@/api/biz/bizContractApi'
	import {
		signPayEnum,
		approvalStatusEnum,
		signMethodEnum,
		transTypeEnum
	} from '../contractManagement/enum/contractEnum'
	import { useRoute } from 'vue-router'
	import ImagePreview from '@/components/drawer/imagePreview.vue'
	import mediaSection from '../contractManagement/mediaSection.vue'

	const route = useRoute()

	const contractInfoList = ref([])

	const activeKey = ref(0)
	const onTabChange = (value) => {
		if (!value) {
			getDetail()
		} else {
			getHistoryDetail()
		}
	}

	onBeforeMount(() => {
		getDetail()
	})

	const columns = [
		{
			title: '订单编号',
			dataIndex: 'orderNo',
			width: 160,
			fixed: 'left',
			customRender: ({ text }) => text || '-'
		},
		{
			title: '业务类型',
			dataIndex: 'businessType',
			width: 80,
			ellipsis: true
		},
		{
			title: '服务类目',
			dataIndex: 'serviceProjectName',
			width: 280,
			ellipsis: true,
			customRender: ({ text, record }) => `${record.serviceClassName} > ${record.serviceTypeName} > ${text}`
		},
		{
			title: '订单金额',
			dataIndex: 'orderAmount',
			width: 80,
			ellipsis: true
		},
		{
			title: '定金金额',
			dataIndex: 'depositAmount',
			width: 80,
			ellipsis: true
		},
		{
			title: '尾款金额',
			dataIndex: 'balancePayment',
			width: 80,
			ellipsis: true
		},
		{
			title: '服务时长',
			dataIndex: 'serviceLife',
			width: 60,
			ellipsis: true,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '赠送时长',
			dataIndex: 'giveMonth',
			width: 60,
			ellipsis: true,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '开始服务月',
			dataIndex: 'serviceStime',
			width: 80,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '结束服务月',
			dataIndex: 'serviceEtime',
			width: 80,
			customRender: ({ text }) => text || '-'
		}
	]
	const transColumns = [
		...columns,
		{
			title: '订单转换时间',
			dataIndex: 'transTime',
			width: 120,
			ellipsis: true,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '备注',
			dataIndex: 'orderStatus',
			width: 80,
			customRender: ({ text }) => (text === 'CONVERTED' ? '已转换' : '-')
		}
	]

	/**
	 * ====================
	 *       基本逻辑
	 * ====================
	 */
	const detailInfo = ref({
		list: []
	})
	const onloading = ref(false)
	const getDetail = () => {
		onloading.value = true
		contractApi
			.getContractDetail({ id: route.params.id })
			.then((res) => {
				contractInfoList.value = [res]
				onloading.value = false
			})
			.catch((err) => {
				contractInfoList.value = []
			})
			.finally(() => {
				onloading.value = false
			})
	}
	const getHistoryDetail = () => {
		onloading.value = true
		contractApi
			.getHistoryContractDetail({ id: route.params.id, type: 1 })
			.then((res) => {
				contractInfoList.value = res
				onloading.value = false
			})
			.catch((err) => {
				contractInfoList.value = []
			})
			.finally(() => {
				onloading.value = false
			})
	}

	/**
	 * 查看凭证
	 */
	const imagePreviewRef = ref(null)
	const onPreview = ({ title, tip, imgUrl }) => {
		imgUrl &&
			imagePreviewRef.value.open({
				title,
				tip,
				list: imgUrl.split(',')
			})
	}
</script>
<style lang="less" scoped>
	.table_border :deep(th) {
		border-color: #6e6e6e !important;
	}
	.table_border :deep(td) {
		border-color: #6e6e6e !important;
	}
	.table_border :deep(table) {
		border-color: #6e6e6e !important;
	}
	.table_border :deep(td:first-child) {
		border-left: 1px solid #6e6e6e !important;
	}
	.table_border :deep(th:first-child) {
		border-left: 1px solid #6e6e6e !important;
	}
</style>
